<template>
	<wd-navbar title="微信登录" custom-style="background-color: transparent !important;" left-arrow @click-left="utils.navigateBack" fixed safeAreaInsetTop></wd-navbar>
	<!-- 渐变背景 -->
	<view class="head-bg"></view>

	<!-- 页面内容 -->
	<view class="page-content">
		<!-- Logo区域 -->
		<view class="logo-section">
			<image src="/static/logo.png" class="logo" mode="widthFix" />
			<view class="app-title">Hi~ 你好</view>
			<view class="app-subtitle">发现更大的世界</view>
		</view>

		<!-- 登录按钮区域 -->
		<view class="login-section">
			<wd-button type="primary" @click="handleLogin" class="login-btn" :class="{ 'btn-inactive': !agreedToTerms }" block>微信授权登录</wd-button>
		</view>

		<!-- 隐私协议区域 -->
		<view class="privacy-section" :class="{ 'shake-error': isShaking }">
			<view class="agreement-row">
				<wd-checkbox v-model="agreedToTerms" size="16px" class="agreement-checkbox"></wd-checkbox>
				<view class="agreement-text">
					我已阅读并同意
					<text class="link-text" @click="openUserAgreement">《用户协议》</text>
					和
					<text class="link-text" @click="openUserAgreement">《隐私政策》</text>
				</view>
			</view>
		</view>
		<!-- 完善信息弹窗 -->
		<wd-popup v-model="showInfoPopup" position="bottom" custom-style="height: 600rpx;">
			<view class="userinfo-popup">
				<view class="popup-title">完善信息</view>
				<button class="reset-button avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar" mode="aspectFill" :src="utils.getAvatarPath(formData.avatar)"></image>
				</button>
				<input class="nickname-input" v-model="formData.nickname" type="nickname" placeholder="请输入昵称，2-24个字符" />
				<view class="btn-wrap">
					<wd-button type="primary" @click="onSubmitSaveInfo" class="login-btn" :class="{ 'btn-inactive': !agreedToTerms }" block>确认登录</wd-button>
				</view>
			</view>
		</wd-popup>
	</view>
</template>

<script setup>
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { useUserStore } from '@/store/user';
import utils from '@/utils/utils.js';
import { uploadImage } from '@/utils/upload.js';
import { baseAPI } from '@/api/index';

//页面公共变量
const agreedToTerms = ref(false);
const isShaking = ref(false);
const showInfoPopup = ref(false);
const formData = reactive({
	nickname: '',
	avatar: ''
});

const userStore = useUserStore();

// 页面生命周期
onLoad(() => {});
onShow(() => {});

// 页面函数
function handleLogin() {
	if (!agreedToTerms.value) {
		// 触发抖动效果
		isShaking.value = true;
		setTimeout(() => {
			isShaking.value = false;
		}, 600);

		return;
	}

	// 执行登录逻辑
	mnpLogin();
}

async function mnpLogin() {
	uni.showLoading({
		title: '登录中'
	});

	const userData = await userStore.mnpLogin();

	if (!userData.user.avatar) {
		showInfoPopup.value = true;
		uni.hideLoading();
		return;
	}

	uni.hideLoading();

	uni.navigateBack();
}

function onSubmitSaveInfo() {
	uni.showLoading({
		title: '提交中'
	});

	baseAPI.post('user/saveInfo', formData).then((res) => {
		if (res.code == 200) {
			uni.navigateBack();
		}

		uni.hideLoading();
	});
}

async function onChooseAvatar(e) {
	const avatar = await uploadImage({
		url: e.detail.avatarUrl
	});

	formData.avatar = avatar;
}

function openUserAgreement() {
	uni.navigateTo({
		url: '/pages/agreement?id=1'
	});
}
</script>

<style lang="scss" scoped>
// 渐变背景
.head-bg {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-image: linear-gradient(180deg, rgba($-color-theme, 0.5), rgba($-color-theme, 0.08), #ffffff);
	z-index: 1;
}

// 页面内容
.page-content {
	position: relative;
	z-index: 10;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 280rpx;
	box-sizing: border-box;
}

// Logo区域
.logo-section {
	text-align: center;
	margin-bottom: 120rpx;

	.logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
	}

	.app-title {
		font-size: 56rpx;
		font-weight: 700;
		color: #333;
		margin-bottom: 20rpx;
		text-shadow: none;
	}

	.app-subtitle {
		font-size: 32rpx;
		color: #666;
		line-height: 1.4;
	}
}

// 登录按钮区域
.login-section {
	width: 100%;
	max-width: 500rpx;
	margin-bottom: 80rpx;

	.login-btn {
		height: 96rpx;
		border-radius: 48rpx;
		font-size: 36rpx;
		font-weight: 600;
		background: $-color-theme;
		color: #fff;
		border: none;
		box-shadow: 0 8rpx 32rpx rgba($-color-theme, 0.3);
		transition: all 0.3s ease;

		&.btn-inactive {
			background: rgba($-color-theme, 0.6);
			box-shadow: 0 4rpx 16rpx rgba($-color-theme, 0.2);
			opacity: 0.8;
		}

		&:disabled {
			background: #e0e0e0;
			color: #999;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		}
	}
}

// 隐私协议区域
.privacy-section {
	transition: all 0.3s ease;

	.agreement-row {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		border-radius: 12rpx;
		transition: all 0.3s ease;

		.agreement-checkbox {
			margin-right: 15rpx;
			margin-top: 5rpx;
		}

		.agreement-text {
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
			text-align: left;
			flex: 1;

			.link-text {
				color: $-color-theme;
				text-decoration: underline;
				font-weight: 500;

				&:active {
					opacity: 0.7;
				}
			}
		}
	}

	// 抖动和错误提示样式
	&.shake-error {
		.agreement-row {
			border: 2rpx solid #ff4757;
			background-color: rgba(255, 71, 87, 0.05);
			animation: shake 0.6s ease-in-out;
		}
	}
}

// 抖动动画
@keyframes shake {
	0%,
	100% {
		transform: translateX(0);
	}

	10%,
	30%,
	50%,
	70%,
	90% {
		transform: translateX(-10rpx);
	}

	20%,
	40%,
	60%,
	80% {
		transform: translateX(10rpx);
	}
}
.userinfo-popup {
	.popup-title {
		font-weight: bold;
		margin-bottom: 20rpx;
		text-align: center;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f5f5f5;
	}
	padding: 20rpx;
	.avatar-wrapper {
		width: 120rpx;
		height: 120rpx;
		background-color: #999;
		border-radius: 50%;
		margin-bottom: 60rpx;

		.avatar {
			width: 100%;
			height: 100%;
		}
	}

	.nickname-input {
		padding: 20rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.btn-wrap {
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		margin-top: 40rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
}
</style>
